<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时间条形图</title>
</head>
<body>
<div id="container"/>
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.25/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script>
<script>
    <!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart() 改为 new G2.Chart，即可运行。 -->
    const data = [
        {task: 'task0', startTime: '2018-04-18 01:17:12', endTime: '2018-04-18 01:19:10', status: 0},
        {task: 'task1', startTime: '2018-04-18 01:18:15', endTime: '2018-04-18 01:19:20', status: 0},
        {task: 'task2', startTime: '2018-04-18 02:11:32', endTime: '2018-04-18 02:18:50', status: 0},
        {task: 'task3', startTime: '2018-04-18 02:18:50', endTime: '2018-04-18 03:16:38', status: 0},
        {task: 'task4', startTime: '2018-04-18 02:19:48', endTime: '2018-04-18 02:21:57', status: 0},
        {task: 'task5', startTime: '2018-04-18 03:16:38', endTime: '2018-04-18 03:19:38', status: 1},
        {task: 'task6', startTime: '2018-04-18 03:19:38', endTime: '2018-04-18 03:27:49', status: 0},
        {task: 'task7', startTime: '2018-04-18 07:29:37', endTime: '2018-04-18 07:33:01', status: 0},
        {task: 'task8', startTime: '2018-04-18 03:27:49', endTime: '2018-04-18 04:26:05', status: 0},
        {task: 'task9', startTime: '2018-04-18 04:26:05', endTime: '2018-04-18 06:06:36', status: 0},
        {task: 'task10', startTime: '2018-04-18 06:06:36', endTime: '2018-04-18 06:15:15', status: 0},
        {task: 'task11', startTime: '2018-04-18 03:27:49', endTime: '2018-04-18 03:34:50', status: 0},
    ];

    const values = ['运行成功', '运行失败'];

    data.forEach((obj: any) => {
        obj.range = [obj.startTime, obj.endTime];
        obj.status = values[obj.status];
    });

    const chart = new Chart({
        container: 'container',
        autoFit: true,
        height: 500,
    });

    chart.data(data);

    chart.coordinate().transpose().scale(1, -1);

    chart.scale('range', {
        type: 'time',
        nice: true,
    });

    chart.tooltip({
        showMarkers: false,
    });
    chart.interaction('element-active');
    chart
        .interval()
        .position('task*range')
        .color('status', ['#2FC25B', '#F04864'])
        .animate({
            appear: {
                animation: 'scale-in-x',
            },
        });

    chart.render();
</script>
</body>
</html>